<template>
  <!-- 分享配置 -->
  <div>
    <el-form ref="form5" :inline="true" :model="form5" label-width="150px" :rules="rules">
      <el-row>
        <el-col :span="24">
          <el-form-item prop="share_img_ids" label="上传分享海报">
            <newUpload ref="uploadImg3" :file-num="12" :file-list="fileList3" :size-number="2" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="mini_img_ids" label="小程序卡片图">
            <newUpload ref="uploadImg4" :file-num="1" :file-list="fileList4" :size-number="2" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="小程序卡片文案" prop="mini_word">
            <el-input v-model="form5.mini_word" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="web_img_ids" label="H5朋友圈小图">
            <newUpload ref="uploadImg5" :file-num="1" :file-list="fileList5" :size-number="2" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="H5朋友圈文案" prop="web_word">
            <el-input v-model="form5.web_word" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="web_bg_img_ids" label="H5背景图">
            <newUpload ref="uploadImg6" :file-num="1" :file-list="fileList6" :size-number="2" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <!-- <el-button type="primary" @click="handleNext">下一页</el-button> -->
            <el-button type="primary" @click="handleSubmit">提交</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { handleShare } from '@/api/invitationMange'
import newUpload from '@/components/imgUpload/shopImgUp'
export default {
  components: { newUpload },
  // props: ["title", "activeId"],
  props: {
    title: String,
    activeId: String,
    propid: String,
    shareForm: Object
  },
  data() {
    return {
      form5: {
        share_img_ids: [],
        mini_img_ids: [],
        web_img_ids: [],
        web_bg_img_ids: [],
        mini_word: '',
        web_word: ''
      },
      fileList3: [],
      fileList4: [],
      fileList5: [],
      fileList6: [],
      rules: {
        share_img_ids: [
          {
            required: true,
            message: '请选择上传分享海报'
          }
        ],
        mini_img_ids: [
          {
            required: true,
            message: '请选择小程序卡片图'
          }
        ],
        web_img_ids: [
          {
            required: true,
            message: '请选择H5朋友圈小图'
          }
        ],
        web_bg_img_ids: [
          {
            required: true,
            message: '请选择H5背景图'
          }
        ],
        mini_word: [
          {
            required: true,
            message: '请填写小程序卡片文案',
            trigger: 'blur'
          }
        ],
        web_word: [
          {
            required: true,
            message: '请填写H5朋友圈文案',
            trigger: 'blur'
          }
        ]
      },
      adds: null
    }
  },
  mounted() {
    if (this.propid) {
      this.form5 = { ...this.shareForm }
      this.form5['id'] = this.propid
      this.adds = this.propid
      this.infos()
    }
  },
  methods: {
    infos() {
      console.log('this.form5', this.form5)
      if (this.form5.share_img_ids.length > 0) {
        this.form5.share_img_ids.forEach(i => {
          this.fileList3.push({
            url: localStorage.getItem('imgUrlPrefix') + i
          })
        })
        setTimeout(() => {
          this.$refs.uploadImg3.getLength(this.fileList3)
        }, 100)
      }
      if (this.form5.mini_img_ids.length > 0) {
        this.form5.mini_img_ids.forEach(i => {
          this.fileList4.push({
            url: localStorage.getItem('imgUrlPrefix') + i
          })
        })
        setTimeout(() => {
          this.$refs.uploadImg4.getLength(this.fileList4)
        }, 100)
      }
      if (this.form5.web_img_ids.length > 0) {
        this.form5.web_img_ids.forEach(i => {
          this.fileList5.push({
            url: localStorage.getItem('imgUrlPrefix') + i
          })
        })
        setTimeout(() => {
          this.$refs.uploadImg5.getLength(this.fileList5)
        }, 100)
      }
      if (this.form5.web_bg_img_ids.length > 0) {
        this.form5.web_bg_img_ids.forEach(i => {
          this.fileList6.push({
            url: localStorage.getItem('imgUrlPrefix') + i
          })
        })
        setTimeout(() => {
          this.$refs.uploadImg6.getLength(this.fileList6)
        }, 100)
      }
    },
    // 提交
    handleSubmit() {
      this.form5.share_img_ids = this.$refs.uploadImg3.submitUpload()
      this.form5.mini_img_ids = this.$refs.uploadImg4.submitUpload()[0]
      this.form5.web_img_ids = this.$refs.uploadImg5.submitUpload()[0]
      this.form5.web_bg_img_ids = this.$refs.uploadImg6.submitUpload()
      let data
      // if(this.propid){
      // 修改data
      data = {
        share_img_ids: JSON.stringify(this.form5.share_img_ids),
        mini_img_ids: JSON.stringify([this.form5.mini_img_ids]),
        web_img_ids: JSON.stringify([this.form5.web_img_ids]),
        web_bg_img_ids: JSON.stringify(this.form5.web_bg_img_ids),
        mini_word: this.form5.mini_word,
        web_word: this.form5.web_word,
        id: this.propid
      }
      // }else{
      //   // 新增data
      //   data = {
      //     share_img_ids: JSON.stringify(this.form5.share_img_ids),
      //     mini_img_ids: JSON.stringify([this.form5.mini_img_ids]),
      //     web_img_ids: JSON.stringify([this.form5.web_img_ids]),
      //     web_bg_img_ids: JSON.stringify(this.form5.web_bg_img_ids),
      //     mini_word: this.form5.mini_word,
      //     web_word: this.form5.web_word,
      //     id: this.activeId
      //   };
      // }
      if (this.propid) {
        handleShare(data).then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: '提交成功',
              type: 'success'
            })
          }
        })
      }
      // console.log
      // this.form5["title"] = this.title;
      // if(this.propid){
      this.$emit('prize', this.title, this.propid)
      // }else{
      //   this.$emit("prize", this.title, this.activeId);
      // }
    }
  }
}
</script>
<style  scoped>
</style>
